<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ftm" uri="http://java.sun.com/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>部门信息</title>
    <!--引入bootStrap-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="../../static/js/jquery.min.js"></script>
    <style>
        * {
            margin:0;
            padding:0;
        }
        button,input {
            outline:none;
        }
        button,.login {
            width:120px;
            height:42px;
            background:#f40;
            color:#fff;
            border:none;
            border-radius:6px;
            display:block;
            margin:20px auto;
            cursor:pointer;
        }
        .popOutBg {
            width:100%;
            height:100%;
            position:fixed;
            left:0;
            top:0;
            background:rgba(0,0,0,.6);
            display:none;
        }
        .popOut {
            position:fixed;
            width:600px;
            height:300px;
            top:50%;
            left:50%;
            margin-top:-150px;
            margin-left:-300px;
            background:#fff;
            border-radius:8px;
            overflow:hidden;
            display:none;
        }
        .popOut > span {
            position:absolute;
            right:10px;
            top:0;
            height:42px;
            line-height:42px;
            color:#000;
            font-size:30px;
            cursor:pointer;
        }
        .popOut table {
            display:block;
            margin:42px auto 0;
            width:520px;
        }
        .popOut caption {
            width:520px;
            text-align:center;
            color:#f40;
            font-size:18px;
            line-height:42px;
        }
        .popOut table tr td {
            color:#666;
            padding:6px;
            font-size:14px;
        }
        .popOut table tr td:first-child {
            text-align:right;
        }
        .inp {
            width:280px;
            height:30px;
            line-height:30px;
            border:1px solid #999;
            padding:5px 10px;
            color:#000;
            font-size:14px;
            border-radius:6px;
        }
        .inp:focus {
            border-color:#f40;
        }
        @keyframes ani {
            from {
                transform:translateX(-100%) rotate(-60deg) scale(.5);
            }
            50% {
                transform:translateX(0) rotate(0) scale(1);
            }
            90% {
                transform:translateX(20px) rotate(0) scale(.8);
            }
            to {
                transform:translateX(0) rotate(0) scale(1);
            }
        }.ani {
             animation:ani .5s ease-in-out;
         }
        #btn_add{
            float: left;
        }
    </style>
</head>
<body>
<div class="container">

    <button id="btn_add" type="button">新增部门</button>
    <div class="popOutBg"></div>
    <div class="popOut">
        <span title="关闭"> x </span>
        <form action="${pageContext.request.contextPath}/dept/addDept" method="post">
            <table>
                <caption>老板，您来了！</caption>
                <tbody><tr>
                    <td width="120">部门名称：</td>
                    <td><input type="text" class="inp" name="deptName" placeholder="部门名称" required ></td>
                </tr>

                <tr>
                    <td colspan="2"><input type="submit" class="login" value="添加" onclick=""></td>

                </tr>
                </tbody>
            </table>
        </form>
    </div>


    <div class="row clearfix">
        <div class="col-md-12 column"></div>
        <table class="table table-hover table-striped">
            <thead>
            <tr>
                <th>部门ID</th>
                <th>部门名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="dept" items="${allDeptList}">
                    <tr>
                        <td>${dept.deptId}</td>
                        <td>${dept.deptName}</td>
                        <td>
                            <a href="${pageContext.request.contextPath}/dept/delDept/${dept.getDeptId()}">删除</a>
                            <a href="${pageContext.request.contextPath}/dept/toUpdateDept/${dept.getDeptId()}">修改</a>
                        </td>
                    </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
<script>
    function $(param) {
        if (arguments[1] == true) {
            return document.querySelectorAll(param);
        } else {
            return document.querySelector(param);
        }
    }

    function ani() {
        $(".popOut").className = "popOut ani";
    }
    $("button").onclick = function() {
        $(".popOut").style.display = "block";
        ani();
        $(".popOutBg").style.display = "block";
    };
    $(".popOut > span").onclick = function() {
        $(".popOut").style.display = "none";
        $(".popOutBg").style.display = "none";
    };
    $(".popOutBg").onclick = function() {
        $(".popOut").style.display = "none";
        $(".popOutBg").style.display = "none";
    };


</script>

</body>
</html>

